<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../../build/aui-css/css/bootstrap.css">

    <style>
        #wrapper {
            margin: 180px 15px 0;
            position: relative;
        }
    </style>

    <script src="../../build/aui/aui.js"></script>
</head>

<body class="yui3-skin-sam">

<div id="wrapper">
    <h1>Alloy - ColorPickerPopover Demo</h1>

    <div id="container">
        <label>Color trigger #1</label>
        <input class="form-control" type="text">
        <label>Color trigger #2</label>
        <input class="form-control" type="text">
        <label>Color trigger #3</label>
        <input class="form-control" type="text">
    </div>

</div>

<script>
    YUI({ filter:'raw' }).use('aui-color-picker-popover', function(Y) {
            var colorPicker = new Y.ColorPickerPopover({
                trigger: '.form-control',
                zIndex: 2
            }).render();

            colorPicker.on('select', function(event) {
                event.trigger.setStyle('backgroundColor', event.color);
            });
        }
    );
</script>

</body>
</html>